<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/mine/wdkmd.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="未打卡门店" :showBack="true"></cusHeaderVue>
		<view class="contBox" :style="{paddingTop: `calc(${scrollerHeight} + 130rpx)`}">
			<view class="contTop">
				<view class="contTit">
					门店<text class="num">{{ totalStoreCount }}</text>家
				</view>
				<view class="contTime" @click="selectMonth">
					{{ selectedMonth }}
					<u-icon name="arrow-down-fill" color="#F79F31" size="10"></u-icon>
				</view>
			</view>
		</view>
		<view class="contBoxBig">
			<scroll-view scroll-y="true" :style="{height:swiperHeight}">
				<view class="listBox">
					<view class="listLi" v-for="(item,index) in storeList" :key="index" @click="toUrl('/pages/mine/shopXq?id=' +　item.id)">
						<view class="listLeft">
							<view class="listName">
								{{ item.name || '未知门店' }}
							</view>
							<view class="listTime">
								<image src="/static/home/didian.png" mode=""></image>
								{{ item.address || '暂无地址信息' }}
							</view>
						</view>
						<view class="listTag">
							{{ item.level || '' }}
						</view>

					</view>
				</view>
			</scroll-view>
		</view>
		<MonthPickerPopup 
			ref="monthPickerRef" 
			@confirm="onMonthConfirm" 
			@cancel="onMonthCancel" 
		/>

	</view>
</template>

<script setup>
	import cusHeaderVue from '@/components/cus-header.vue';
	import MonthPickerPopup from '@/components/MonthPickerPopup.vue';
	import { GETUncheckedStore } from '@/api/interface.js';
	import {
		ref,
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,

	} from '@dcloudio/uni-app';

	const scrollerHeight = ref('');
	const swiperHeight = ref('');

	// 月份选择相关
	const monthPickerRef = ref(null);
	const selectedMonth = ref('');
	const storeList = ref([]);
	const totalStoreCount = ref(0);

	// 初始化默认月份并加载数据
	const initDefaultMonth = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		selectedMonth.value = `${year}年${month}月`;
		loadUncheckedStores();
	};

	
	const toUrl = (urlSrc) =>{
		uni.navigateTo({
			url:urlSrc
		})
	}
	

	
	// 打开年月选择器
	const selectMonth = () => {
		if (monthPickerRef.value) monthPickerRef.value.open();
	};

	// 月份选择确认
	const onMonthConfirm = (month) => {
		selectedMonth.value = month;
		loadUncheckedStores();
	};

	// 月份选择取消（可选）
	const onMonthCancel = () => {};

	// 加载未打卡门店
	const loadUncheckedStores = async () => {
		try {
			// 解析 selectedMonth 为 YYYY-MM
			const match = selectedMonth.value.match(/(\d+)年(\d+)月/);
			let queryMonth = '';
			if (match) {
				queryMonth = `${match[1]}-${String(parseInt(match[2])).padStart(2,'0')}`;
			}
			const res = await GETUncheckedStore({ monthStr: queryMonth });
			if (res && res.code === 0) {
				const list = Array.isArray(res.data) ? res.data : (res.data?.shopList || []);
				storeList.value = list || [];
				totalStoreCount.value = storeList.value.length;
			} else {
				storeList.value = [];
				totalStoreCount.value = 0;
			}
		} catch (e) {
			storeList.value = [];
			totalStoreCount.value = 0;
			console.error('获取未打卡门店失败', e);
		}
	};

	onLoad(() => {
		getBarHeight();
		initDefaultMonth();
	})
	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(resu) {
				scrollerHeight.value = resu.statusBarHeight + 'px'
				// resu 可以获取当前屏幕的高度
				const query = uni.createSelectorQuery();
				query.select('.contBoxBig').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				query.exec(res => {
					swiperHeight.value = resu.windowHeight - res[0].top - resu.safeAreaInsets
						.bottom - resu.statusBarHeight - 70 +
						'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.bgColor {
		width: 750rpx;
		height: 740rpx;
		position: absolute;
		z-index: -1;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		width: 100%;
		padding: 22rpx;
		box-sizing: border-box;

		.contTop {
			padding: 0 24rpx;
			box-sizing: border-box;

			.contTit {
				font-weight: 500;
				font-size: 29.41rpx;
				color: #1C2027;

				text {
					margin-left: 30rpx;
				}

				.num {
					font-size: 48.09rpx;
					font-weight: 400;
					color: #FF5050;
					margin-left: 0;
				}
			}

			.contTime {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 210.9rpx;
				height: 56.41rpx;
				border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
				background: #ffffff;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #f79f31;
				font-weight: 400;
				font-size: 25.64rpx;
				padding: 0 22rpx;
				box-sizing: border-box;
				border: 1px solid #f79f31;
			}
		}
	}

	.contBoxBig {

		padding: 10rpx 22rpx;
		box-sizing: border-box;

		.listBox {
			.listLi {
				width: 100%;
				border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
				background: #ffffff;
				padding: 35rpx 27rpx;
				box-sizing: border-box;
				margin-bottom: 19rpx;
				display: flex;
				align-items: center;
				position: relative;

				.listLeft {
					flex: 1;

					.listName {
						font-weight: 500;
						font-size: 33.33rpx;
						color: #1C2027;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 650rpx;
					}

					.listTime {
						image{
							width: 40.38rpx;
							height: 40.38rpx;
							margin-right: 14.74rpx;
						}
						color: #7f8494;
						font-weight: 400;
						font-size: 25.64rpx;
						margin-top: 22rpx;
						display: flex;
					}
				}

				.listTag {
					position: absolute;
					width: 60rpx;
					height: 40rpx;
					background: url('/static/home/tagYz.png') no-repeat center;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					right: 0;
					top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFBF7;
				}
			}
		}
	}
</style>